<template>
  <el-menu :default-active="route.fullPath" router>
    <el-sub-menu v-for="item in menus" :key="item.path" :index="item.path">
      <template #title>
        <el-icon>
          <component :is=item.meta?.icon />
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>
      <el-menu-item v-for="itemChild in item.children"
                    :key="item.path+itemChild.path"
                    :index="item.path+itemChild.path">
        <el-icon>
          <component :is="itemChild.meta?.icon"/>
        </el-icon>
        <span>{{ itemChild.meta?.title }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import _ from 'lodash'
import type {RouteRecordName} from "vue-router";
import {useRouter,useRoute} from "vue-router";
import {useStore} from "@/store";
const  store = useStore()
const route = useRoute()
const router = useRouter()
const permission = store.state.users.infos.permission;

const menus = _.cloneDeep(router.options.routes).filter((v) => {
  v.children = v.children?.filter((v) => v.meta?.menu && (permission as (RouteRecordName|undefined)[]).includes(v.name));
  return v.meta?.menu && (permission as (RouteRecordName|undefined)[]).includes(v.name)
})
// console.log(JSON.stringify(menus)+'_______'+JSON.stringify(permission))
// console.log(JSON.stringify(route.fullPath))
</script>

<style scoped lang="scss">

.el-menu {
  height: calc(100vh - 60px);
  border: none;
  padding-top: 30px;
}

.el-menu-item.is-active {
  background: #e6f7ff;
  border-right: 3px solid #1890ff;
}
</style>
